<script setup>
const counts = ref(0);
const current = ref(1);
const size = ref(10);
const formData = ref({
  id: undefined,
  orderTime: null,
});
const rules = ref({
  id: [],
  orderTime: [],
});
const tableData = ref([]);

const init = async () => {
  // Your implementation here
};

const userQuery = () => {
  current.value = 1;
  init();
};

const cancelOrDeliveryOrComplete = (status, id) => {
  // Your implementation here
};

const userSizeChange = (val) => {
  size.value = val;
  init();
};

const userCurrentChange = (val) => {
  current.value = val;
  init();
};
</script>

<template>
  <div id="order-app" class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <el-form ref="editUser" :model="formData" :rules="rules" label-position="left" label-width="px" size="medium">
          <el-row>
            <el-col :span="7">
              <el-form-item label="订单号：" label-width="80px" prop="id">
                <el-input v-model="formData.id" :style="{ width: '100%' }" clearable
                          placeholder="请输入订单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="订单创建时间：" label-width="120px" prop="orderTime">
                <el-date-picker
                    v-model="formData.orderTime"
                    :style="{ width: '100%' }"
                    clearable
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0">
                <el-button icon="el-icon-search" size="medium" type="primary" @click="userQuery">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table :data="tableData" class="tableBox" stripe>
        <el-table-column label="订单号" prop="id"></el-table-column>
        <el-table-column label="商品标题" prop="productName"></el-table-column>
        <el-table-column label="用户名" prop="userId"></el-table-column>
        <el-table-column label="下单时间" prop="createTime"></el-table-column>
        <el-table-column label="金额" prop="totalPrice"></el-table-column>
        <el-table-column label="物流单号" prop="logisticsNum"></el-table-column>
        <el-table-column label="订单状态" prop="status">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1" class="blueBug" type="text"
                       @click="cancelOrDeliveryOrComplete(1, scope.row.id)">
              取消订单
            </el-button>
            <el-button v-if="scope.row.status === 2" class="blueBug" type="text"
                       @click="cancelOrDeliveryOrComplete(2, scope.row.id)">
              退款
            </el-button>
            <el-button v-if="scope.row.status === 3" class="blueBug" type="text"
                       @click="cancelOrDeliveryOrComplete(3, scope.row.id)">
              退款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-size="size"
          :page-sizes="[10, 20, 30, 40]"
          :total="counts"
          class="pageList"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="userSizeChange"
          @current-change="userCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<style scoped>

</style>